// 引入必要的 React Hooks：useEffect 用于副作用处理，useState 用于状态管理，useRef 用于引用管理
import React, { useEffect, useState, useRef } from "react";
import { useNavigate } from "react-router-dom";
// 引入组件的样式文件
import "./Fu_css/MapContainer.css"
// 引入高德地图 JavaScript API 加载器
import AMapLoader, { AMap } from "@amap/amap-jsapi-loader";
// 
import { CopyToClipboard } from 'react-copy-to-clipboard';

// 引入搜索当前位置的吃喝玩乐店铺的组件
import SearchNearby from './SearchNearby'
import './yzfMap.css'
import { FloatingPanel } from 'antd-mobile'
import axios from "axios";
import { message } from "antd";


const anchors = [100, window.innerHeight * 0.4, window.innerHeight * 1]


// 定义地图组件
export default function MapContainer() {
    const navigate = useNavigate();

    const [styleShow, setStyleShow] = useState(false);


    // 创建地图实例的引用，用于存储和访问地图对象
    const mapRef = useRef(null);
    // 创建标记点的引用，用于管理地图上的位置标记
    const markerRef = useRef(null);
    // 起点状态及其更新函数
    const [start, setStart] = useState("");
    // 终点状态及其更新函数
    const [end, setEnd] = useState("");
    // 当前位置状态及其更新函数
    const [position, setPosition] = useState(null);
    // 驾驶实例状态及其更新函数，用于路线规划
    const [drivingInstance, setDrivingInstance] = useState(null);
    // 出行方式状态及其更新函数（驾车、步行、骑行）
    const [travelMode, setTravelMode] = useState('DRIVING');
    // 搜索框的值及其更新函数
    const [searchValue, setSearchValue] = useState('');
    // 搜索建议列表及其更新函数
    const [suggestions, setSuggestions] = useState([]);
    // 是否显示搜索建议的状态及其更新函数
    const [showSuggestions, setShowSuggestions] = useState(false);
    // 添加一个 ref 来跟踪当前的路线规划实例
    const routePlannerRef = useRef(null);

    // 初始化定位功能的函数，接收 AMap 对象和地图实例作为参数
    const initGeolocation = (AMap, map) => {
        // 创建定位实例并配置参数
        const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,    // 是否使用高精度定位
            timeout: 15000,              // 定位超时时间（毫秒）
            maximumAge: 0,               // 定位结果缓存时间（0表示每次都重新获取）
            convert: true,               // 自动偏移坐标（从GPS坐标转换为高德坐标）
            showButton: true,            // 显示定位按钮
            buttonPosition: 'RB',        // 定位按钮位置（RB表示右下角）
            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮距离右下角的偏移量
            showMarker: true,            // 定位成功时是否在定位位置显示点标记
            showCircle: true,            // 定位成功时是否显示定位精度圈
            panToLocation: true,         // 定位成功后是否自动移动到定位点
            zoomToAccuracy: true,        // 定位成功后是否自动调整地图视野到定位点            
            zoomControl: true, // 是否显示地图缩放控件
            resizeEnable: true, // 是否随着地图窗口大小改变



        });
        // 将定位控件添加到地图实例中
        map.addControl(geolocation);
        // 返回Promise对象处理定位结果
        return new Promise((resolve, reject) => {
            // 调用高德地图定位接口获取当前位置
            geolocation.getCurrentPosition((status, result) => {
                if (status === 'complete') {
                    // 定位成功，返回定位结果
                    resolve(result);
                } else {
                    // 浏览器定位失败，尝试使用IP定位
                    geolocation.getCityInfo((status, result) => {
                        if (status === 'complete') {
                            // IP定位成功，返回定位结果
                            resolve(result);
                        } else {
                            // IP定位也失败，返回错误信息
                            reject(result);
                        }
                    });
                }
            });
        });
    };
    // 组件初始化时执行的副作用
    useEffect(() => {
        // 设置高德地图安全配置
        window._AMapSecurityConfig = {
            // securityJsCode: "5a023e87dd6f4e30c42a3b847a5c6a6b", // 安全密钥
            securityJsCode: "e0e1b0156c1a8fc4b18f29fe627f589f", // 安全密钥
        };
        // 加载高德地图API及其插件
        AMapLoader.load({
            // key: "79cc110a7746e40dd5e6b01f018ceb00", // 开发者密钥
            key: "2fbaa2940c0665416bd9111ab678e586", // 开发者密钥
            version: "2.0",                          // API版本号
            plugins: [                               // 需要使用的插件列表
                "AMap.Scale",                        // 比例尺控件
                "AMap.AutoComplete",                 // 输入提示插件
                "AMap.PlaceSearch",                  // 地点搜索插件
                "AMap.Driving",                      // 驾车路线规划插件
                "AMap.Walking",                      // 步行路线规划插件
                "AMap.Riding",                       // 骑行路线规划插件
                "AMap.Geolocation",                  // 定位功能插件
                "AMap.CitySearch"                    // 城市搜索插件
            ],
        })
            .then((AMap) => {
                // 创建地图实例并设置基本参数
                mapRef.current = new AMap.Map("container", {
                    viewMode: "3D",                  // 设置地图为3D模式
                    zoom: 11,                        // 设置地图缩放级别
                    center: [116.397428, 39.90923],  // 设置地图中心点（默认北京）
                });

                // 初始化定位功能并处理定位结果
                initGeolocation(AMap, mapRef.current)
                    .then(result => {
                        // 更新当前位置状态
                        setPosition(result.position);
                        // 如果存在旧的标记，先移除
                        if (markerRef.current) {
                            mapRef.current.remove(markerRef.current);
                        }
                        // 创建新的位置标记
                        markerRef.current = new AMap.Marker({
                            position: result.position,                // 标记位置
                            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 标记图标
                            anchor: 'bottom-center'                   // 标记锚点位置
                        });
                        // 将标记添加到地图
                        mapRef.current.add(markerRef.current);
                        // 将地图视图中心设置为当前位置
                        mapRef.current.setCenter(result.position);
                    })
                    .catch(error => {
                        // 处理定位失败的情况
                        console.error('定位失败：', error);
                        alert('定位失败，请确保已允许浏览器获取位置信息，或检查网络连接');
                    });

                // 初始化地点搜索和自动完成功能
                AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function () {
                    // 配置自动完成插件参数
                    const autoOptions = {
                        city: "全国",                // 设置搜索范围为全国
                        input: "searchInput"         // 绑定输入框的id
                    };
                    // 创建自动完成插件实例
                    const autocomplete = new AMap.AutoComplete(autoOptions);
                    // 创建地点搜索插件实例
                    const placeSearch = new AMap.PlaceSearch({
                        city: "全国",                // 设置搜索范围为全国
                        map: mapRef.current,         // 绑定地图实例
                        pageSize: 10,                // 设置每页显示结果数
                        panel: "searchResults"       // 结果列表容器的id
                    });

                    // 监听选择搜索建议项事件
                    autocomplete.on("select", function (e) {
                        // 更新搜索框的值为选中项
                        setSearchValue(e.poi.name);
                        // 隐藏搜索建议列表
                        setShowSuggestions(false);
                        // 在地图上搜索并显示选中的地点
                        placeSearch.search(e.poi.name);
                    });

                    // 监听输入提示事件
                    autocomplete.on("complete", function (result) {
                        // 如果有搜索建议结果
                        if (result.tips) {
                            // 更新搜索建议列表
                            setSuggestions(result.tips);
                            // 显示搜索建议列表
                            setShowSuggestions(true);
                        }
                    });
                });
            })
            .catch((e) => {
                // 处理地图加载失败的情况
                console.log('地图加载失败：', e);
            });

        // 组件卸载时的清理函数
        return () => {
            // 清理路线规划实例
            if (routePlannerRef.current) {
                routePlannerRef.current.clear();
                routePlannerRef.current = null;
            }
            // 销毁地图实例，释放资源
            if (mapRef.current) {
                mapRef.current.destroy();
            }
        };


    }, []); // 空依赖数组，表示仅在组件挂载时执行一次

    // 处理重新定位的函数
    const handleLocate = () => {
        // 检查地图实例和AMap是否可用
        if (mapRef.current && window.AMap) {
            // 调用定位功能
            initGeolocation(window.AMap, mapRef.current)
                .then(result => {
                    // 更新当前位置状态
                    setPosition(result.position);
                    // 如果存在旧的标记，先移除
                    if (markerRef.current) {
                        mapRef.current.remove(markerRef.current);
                    }
                    // 创建新的位置标记
                    markerRef.current = new AMap.Marker({
                        position: result.position,
                        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                        anchor: 'bottom-center'
                    });
                    // 将标记添加到地图
                    mapRef.current.add(markerRef.current);
                    // 将地图中心设置为当前位置
                    mapRef.current.setCenter(result.position);
                })
                .catch(error => {
                    // 处理定位错误
                    console.error('定位失败：', error);
                    alert('定位失败，请确保已允许浏览器获取位置信息，或检查网络连接');
                });
        }
    };

    // 处理路线规划的函数
    const handleRoute = () => {
        if (!start || !end) {
            alert('请输入起点和终点');
            return;
        }

        if (window.AMap && mapRef.current) {
            try {
                // 清除地图上现有的标记和路线
                mapRef.current.clearMap();

                // 清除旧的路线规划实例
                if (routePlannerRef.current) {
                    routePlannerRef.current.clear();
                    routePlannerRef.current = null;
                }

                // 清空路线详情面板
                const panel = document.getElementById('route-panel');
                console.log(panel + "路线面板");

                if (panel) {
                    panel.innerHTML = '';
                }

                // 定义路线规划的通用配置
                const commonConfig = {
                    map: mapRef.current,
                    panel: "route-panel",
                    autoFitView: true,
                    showTraffic: travelMode === 'DRIVING',
                };

                // 根据不同的出行方式创建对应的路线规划实例
                switch (travelMode) {
                    case 'WALKING':
                        routePlannerRef.current = new window.AMap.Walking({
                            ...commonConfig,
                            hideMarkers: false,
                            isOutline: true,
                            outlineColor: '#ffeeee',
                            autoFitView: true
                        });
                        break;
                    case 'RIDING':
                        routePlannerRef.current = new window.AMap.Riding({
                            ...commonConfig,
                            hideMarkers: false,
                            isOutline: true,
                            outlineColor: '#e1f5fe',
                            autoFitView: true
                        });
                        break;
                    case 'DRIVING':
                    default:
                        routePlannerRef.current = new window.AMap.Driving({
                            ...commonConfig,
                            policy: 0,
                            ferry: 1,
                            hideMarkers: false,
                            showTraffic: true,
                            autoFitView: true
                        });
                        break;
                }

                // 开始路线规划搜索
                routePlannerRef.current.search([
                    { keyword: start, city: '全国' },
                    { keyword: end, city: '全国' }
                ], function (status, result) {
                    if (status === 'complete') {
                        console.log(`${travelMode}路线规划成功`);
                        // 获取路线距离和时间
                        const distance = result.routes[0].distance;
                        const duration = result.routes[0].time;

                        // // 创建路线总览信息
                        const summaryInfo = document.createElement('div');
                        // summaryInfo.style.padding = '1rem';
                        // summaryInfo.style.backgroundColor = '#f5f5f5';
                        // summaryInfo.style.marginBottom = '1rem';
                        // summaryInfo.style.borderRadius = '0.4rem';
                        // summaryInfo.innerHTML = `
                        //     <div style="font-weight: bold; margin-bottom: 0.5rem;">路线总览</div>
                        // <div>总距离：${(distance / 1000).toFixed(1)}公里</div>
                        // <div>预计用时：${Math.ceil(duration / 60)}分钟</div>
                        // `;
                        summaryInfo.innerHTML = `  
                            <div style="font-weight: bold; margin-bottom: 0.5rem;">路线总览</div>                                                     
                            <div>总距离：${(distance / 1000).toFixed(1)}公里</div>
                            <div>预计用时：${Math.ceil(duration / 60)}分钟</div>
                        `;


                        // // 将总览信息插入到面板顶部
                        panel.insertBefore(summaryInfo, panel.firstChild);

                    } else {
                        console.error('路线规划失败：', result);
                        alert('路线规划失败，请检查地址是否正确');

                        // 清理失败的实例
                        if (routePlannerRef.current) {
                            routePlannerRef.current.clear();
                            routePlannerRef.current = null;
                        }
                    }
                    setStyleShow(!styleShow)
                });
            } catch (error) {
                console.error('路线规划出错：', error);
                alert('路线规划出错，请稍后重试');
            }
        }
    };

    // 处理出行方式改变的函数
    const handleTravelModeChange = (mode) => {
        // 更新出行方式
        setTravelMode(mode);
        // 如果已有起点和终点，则自动重新规划路线
        if (start && end) {
            handleRoute();
        }
    };

    const [getAddress, setGetAddress] = useState('')
    // 根据当前位置的经纬度获取地址文字
    const getAddressByLocation = async (val) => {
        let k = 'a8bc471894f2722bd67d2c6ab19b0918'
        // 可腾科技，免费调用，但是每日只能调取5次接口获取信息  
        let res = await axios.get(`https://api.kertennet.com/geography/locationInfo?lat=${val.lat}&lng=${val.lng}`)
        // 高德接口获取地址信息，但是获取不到地址信息，只能获取到经纬度
        // let res = axios.get(`https://restapi.amap.com/v3/geocode/regeo?key=${k}&location=${val.lng},${val.lat}`)
        console.log(res.data, val);
        // 当前位置信息名称，例如：河北省保定市莲池区保定理工学院
        setGetAddress(res.data.data.address)
    }

    const [addressShow, setAddressShow] = useState(true)

    // 渲染组件
    return (
        <div>
            {/* 地图容器 */}
            <div
                id="container"
                className="container"
                style={{ height: "100vh" }}
            ></div>

            {/* 重新定位按钮 */}
            {/* <button
                onClick={handleLocate}
                style={{
                    position: 'absolute',
                    top: '66rem',                
                    right: '1rem',
                    padding: '0.8rem 1.5rem',
                    backgroundColor: '#1890ff',
                    color: 'white',
                    border: 'none',
                    borderRadius: '0.4rem',
                    cursor: 'pointer'
                }}
            >
                重新定位
            </button> */}

            {/* 当前位置信息展示 */}
            {position && (
                <div style={{
                    position: 'absolute',
                    top: '7rem',
                    left: '2rem',
                    padding: '1rem',
                    backgroundColor: 'white',
                    borderRadius: '0.4rem',
                    boxShadow: '0 0.2rem 0.6rem rgba(0,0,0,0.1)',
                    width: '12rem',
                }}
                >
                    {/* 经度：{position.lng.toFixed(6)}<br />
                    纬度：{position.lat.toFixed(6)} */}
                    {
                        addressShow ?
                            <button onClick={() => {
                                getAddressByLocation(position)
                                setAddressShow(false)
                            }} >
                                获取地址信息
                            </button>
                            :
                            <>
                                <h3>当前您所在的位置是：</h3>
                                <p style={{
                                    color: 'red',
                                    fontSize: '1.2rem',
                                }} >{getAddress}</p>
                                <br />
                                <CopyToClipboard text={getAddress}>
                                    <button onClick={() => {
                                        // console.log(navigator.clipboard.writeText(getAddress)
                                        message.success('地址信息已复制到剪贴板')
                                        setAddressShow(true)
                                    }}  >复制地址信息</button>
                                </CopyToClipboard>
                            </>
                    }
                </div>
            )}

            {/* 搜索框区域 */}
            <div style={{
                position: 'absolute',
                top: '1.5rem',
                left: '50%',
                transform: 'translateX(-50%)',
                width: '31rem',
                zIndex: 100
            }}>
                {/* 返回上一个页面按钮 */}
                {/* <button
                    style={{
                        width: '5rem',
                        height: '3rem',
                        position: 'absolute',
                        top: '0.5rem',
                        right: '0.5rem',
                        padding: '0.8rem 1.5rem',
                        backgroundColor: '#1890ff',
                    }}
                    onClick={() => { navigate(-1) }}  >   返回 </button> */}
                {/* 搜索框容器 */}
                <div style={{
                    position: 'relative',
                    width: '100%',
                    backgroundColor: 'white',
                    borderRadius: '0.4rem',
                    boxShadow: '0 0.2rem 0.6rem rgba(0,0,0,0.1)'
                }}>
                    {/* 搜索输入框 */}
                    <input
                        id="searchInput"
                        type="text"
                        value={searchValue}
                        onChange={(e) => setSearchValue(e.target.value)}
                        placeholder="搜索地点..."
                        style={{
                            width: '100%',
                            padding: '1.2rem 4.5rem 1.2rem 1.5rem',
                            border: '0.1rem solid #ddd',
                            borderRadius: '0.4rem',
                            fontSize: '1.4rem',
                            outline: 'none',
                            transition: 'border-color 0.3s',
                        }}
                        onFocus={() => setShowSuggestions(true)}
                    />
                    {/* 搜索图标 */}
                    <div style={{
                        position: 'absolute',
                        right: '1.5rem',
                        top: '50%',
                        transform: 'translateY(-50%)',
                        color: '#666',
                        cursor: 'pointer'
                    }}>
                        🔍
                    </div>

                    {/* 搜索建议列表 */}
                    {showSuggestions && suggestions.length > 0 && (
                        <div style={{
                            position: 'absolute',
                            top: '100%',
                            left: 0,
                            right: 0,
                            backgroundColor: 'white',
                            borderRadius: '0 0 0.4rem 0.4rem',
                            boxShadow: '0 0.2rem 0.6rem rgba(0,0,0,0.1)',
                            maxHeight: '30rem',
                            overflowY: 'auto',
                            zIndex: 1000
                        }}>
                            {/* 遍历渲染搜索建议项 */}
                            {suggestions.map((item, index) => (
                                <div
                                    key={index}
                                    onClick={() => {
                                        // 点击建议项时更新搜索框并执行搜索
                                        setSearchValue(item.name);
                                        setShowSuggestions(false);
                                        if (window.AMap) {
                                            const placeSearch = new window.AMap.PlaceSearch({
                                                city: "全国",
                                                map: mapRef.current
                                            });
                                            placeSearch.search(item.name);
                                        }
                                    }}
                                    style={{
                                        padding: '1rem 1.5rem',
                                        cursor: 'pointer',
                                        borderBottom: '0.1rem solid #f0f0f0',
                                        transition: 'background-color 0.3s'
                                    }}
                                >
                                    {/* 建议项名称 */}
                                    <div style={{ fontWeight: 'bold' }}>{item.name}</div>
                                    {/* 建议项地址 */}
                                    <div style={{ fontSize: '1.2rem', color: '#666' }}>
                                        {item.district}
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </div>

                {/* 搜索结果列表容器 */}
                <div
                    id="searchResults"
                    style={{
                        marginTop: '1rem',
                        backgroundColor: 'white',
                        borderRadius: '0.4rem',
                        boxShadow: '0 0.2rem 0.6rem rgba(0,0,0,0.1)',
                        maxHeight: '40rem',
                        overflowY: 'auto'
                    }}

                ></div>
            </div>

            {/* 路线规划控制面板 */}
            <div style={{
                position: 'absolute',
                top: '8rem',
                right: '1rem',
                padding: '1.5rem',
                backgroundColor: 'white',
                borderRadius: '0.4rem',
                boxShadow: '0 0.2rem 0.6rem rgba(0,0,0,0.1)'
            }}>
                {/* 出行方式选择按钮组 */}
                <div style={{
                    display: 'flex',
                    gap: '1rem',
                    marginBottom: '1.5rem',
                    justifyContent: 'center'
                }}>
                    {/* 驾车模式按钮 */}
                    <button
                        onClick={() => handleTravelModeChange('DRIVING')}
                        style={{
                            padding: '0.5rem 1rem',
                            backgroundColor: travelMode === 'DRIVING' ? '#1890ff' : '#f0f0f0',
                            color: travelMode === 'DRIVING' ? 'white' : 'black',
                            border: 'none',
                            borderRadius: '0.4rem',
                            cursor: 'pointer'
                        }}
                    >
                        驾车
                    </button>
                    {/* 骑行模式按钮 */}
                    <button
                        onClick={() => handleTravelModeChange('RIDING')}
                        style={{
                            padding: '0.5rem 1rem',
                            backgroundColor: travelMode === 'RIDING' ? '#1890ff' : '#f0f0f0',
                            color: travelMode === 'RIDING' ? 'white' : 'black',
                            border: 'none',
                            borderRadius: '0.4rem',
                            cursor: 'pointer'
                        }}
                    >
                        骑行
                    </button>
                    {/* 步行模式按钮 */}
                    <button
                        onClick={() => handleTravelModeChange('WALKING')}
                        style={{
                            padding: '0.5rem 1rem',
                            backgroundColor: travelMode === 'WALKING' ? '#1890ff' : '#f0f0f0',
                            color: travelMode === 'WALKING' ? 'white' : 'black',
                            border: 'none',
                            borderRadius: '0.4rem',
                            cursor: 'pointer'
                        }}
                    >
                        步行
                    </button>
                </div>

                {/* 起点输入框 */}
                <div style={{ marginBottom: '1rem' }}>
                    <input
                        type="text"
                        value={start}
                        onChange={(e) => setStart(e.target.value)}
                        placeholder="请输入起点"
                        style={{
                            padding: '0.8rem',
                            marginRight: '1rem',
                            borderRadius: '0.4rem',
                            border: '0.1rem solid #ddd'
                        }}
                    />
                </div>

                {/* 终点输入框 */}
                <div style={{ marginBottom: '1rem' }}>
                    <input
                        type="text"
                        value={end}
                        onChange={(e) => setEnd(e.target.value)}
                        placeholder="请输入终点"
                        style={{
                            padding: '0.8rem',
                            marginRight: '1rem',
                            borderRadius: '0.4rem',
                            border: '0.1rem solid #ddd'
                        }}
                    />
                </div>

                {/* 开始导航按钮 */}
                <button
                    onClick={handleRoute}
                    style={{
                        padding: '0.8rem 1.5rem',
                        backgroundColor: '#1890ff',
                        color: 'white',
                        border: 'none',
                        borderRadius: '0.4rem',
                        cursor: 'pointer',
                        width: '100%'
                    }}
                >
                    开始导航
                </button>
            </div>

            {/* 路线详情面板 */}
            <div
                id="route-panel"
                style={
                    styleShow ? {
                        position: 'absolute',
                        top: '40rem',
                        right: '1rem',
                        width: '20rem',
                        maxHeight: '30rem',
                        overflowY: 'auto',
                        backgroundColor: 'white',
                        padding: '1rem',
                        borderRadius: '0.4rem',
                    } : {
                        display: 'none'
                    }
                }
            ></div>

            {/* 吃喝玩乐店铺 */}
            {/* 上滑显示内容 */}
            <div className='map_title_box'  >
                <FloatingPanel anchors={anchors}
                    style={{ width: '25rem' }} >
                    {/* 附近吃喝玩乐 */}
                    <SearchNearby     ></SearchNearby>
                </FloatingPanel>
            </div>
        </div>
    );
}
